<template>
  <div class="container-y">
    <searchWrap @inputValue="inputValue"></searchWrap>
    <ul class="orgWrap" v-show="searchShow">
      <li class="orgWrap-li"
          v-for="(item,index) in orgTitle"
          @click="titleClick(item,index)">
        {{item.title}}
      </li>
    </ul>
    <ul class="contacts-ul" v-if="searchList.length">
      <li class="contacts-li"
          v-for="p in searchList"
          @click.prevent="itemClick(p)">
        <img src="../../img/org.png" class="img-h">
        <input class="checkInput-org"
               :value="p"
               type="checkbox"
               @click.stop="choseItem(p,$event)"
               v-model="checked">
        <div class="txtWrap">
          <div class="name">
            {{p.title}}
          </div>
          <div class="checkIcon"></div>
        </div>
      </li>
    </ul>
    <div class="pdb"></div>
  </div>
</template>

<script>
  import searchWrap from "../commonComponents/search.vue"

  export default {
    data() {
      return {
        bodyShow: true,
        searchShow: true,
        checked: [],
        orgTitle: [
          {title: "首页", key: 0, list: []}
        ],
        searchList: _data.orgList,
        headerRightType: {},
        type: "",
        headerFlag: "",
        id: "",
      }
    },
    methods: {
      init() {
        this.headerRightType = this.$store.state.headerRightType;
        this.headerFlag = this.$store.state.showFlag;
        this.type = _methods.getUrlParam("type") - 0;
        _methods.headerTitleChange(112);
        _methods.headerRightShow({
          val: 112,
          txt: "确定"
        });

        let ckk = {
          1: "orgChecked",
          2: "dwChecked",
          3: "jqChecked",
        }[this.type];

        let ck = this.$store.state[ckk].val.map((i) => {
          return i;
        });

        this.checked = ck;

        switch (this.type) {
          case 1:
            this.searchList = _data.orgList;
            this.orgTitle[0].list = _data.orgList;
            break;
          case 2:
            this.searchList = _data.csList;
            this.orgTitle[0].list = _data.csList;
            break;
          case 3:
            this.searchList = _data.jqList;
            this.orgTitle[0].list = _data.jqList;

            break
        }
      },
      titleClick(item, index) {
        let d = this.orgTitle;
        this.searchList = d[index].list;
        let v = [];
        for (let i = 0; i <= index; i++) {
          v.push(d[i]);
        }
        this.orgTitle = v;
      },
      itemClick(item) {
        let val = item.children;
        if (val && val.length) {
          this.searchList = val;
          this.orgTitle.push({title: item.title, key: item.key, list: val})
        } else {
          mui.toast("无更多组织");
        }
      },
      choseItem(item, ele) {
        let flag = ele.target.checked;
        if (flag) {
          let fn = (arr) => {
            let c = arr.children;
            if (c && c.length) {
              c.forEach((i) => {
                this.checked.push(i);
                fn(i);
              });
            }
          };
          fn(item);
        } else {
          let fn = (arr) => {
            let c = arr.children;
            if (c && c.length) {
              c.forEach((i) => {
                this.checked = this.checked.filter((i2) => {
                  return i2.key != i.key;
                });
                fn(i);
              });
            }
          };
          fn(item);
        }
      },
      inputValue(v) {
        let self = this;
        _methods.deBounce(() => {
          let k = v.toString().trim();
          let arr = self.orgTitle[0].list;
          let df = self.orgTitle[self.orgTitle.length - 1].list;
          if (k != "") {
            let sl = [];
            let fn = (arr2) => {
              let c = arr2.children;
              if (c && c.length) {
                c.forEach((i) => {
                  if (i.title.indexOf(k) != -1) {
                    sl.push(i);
                  }
                  fn(i);
                });
              }
            };
            arr.forEach((i) => {
              if (i.title.indexOf(k) != -1) {
                sl.push(i);
              }
              fn(i);
            });
            self.searchShow = false;
            self.searchList = sl;
          } else {
            self.searchShow = true;
            self.searchList = df;
          }
        }, 200);
      },
    },
    components: {
      searchWrap
    },
    created() {
      this.init();
    },
    mounted() {
      let self = this;
      _data.busInit.on_(() => {
        let da = {
          txt: "",
          val: ""
        };
        let key = [];
        let txt = [];
        self.checked.forEach((i) => {
          key.push(i.key);
          txt.push(i.title);
        });
        da.txt = txt.join(",");
        // da.val = key.join(",");
        da.val = this.checked;
        switch (this.type) {
          case 1:
            if (da.txt) {
              self.$store.commit("_orgChecked", da);
            } else {
              self.$store.commit("_orgChecked", {
                txt: "点击选择响应单位",
                val: []
              });
            }
            break;
          case 2:
            if (da.txt) {
              self.$store.commit("_dwChecked", da);
            } else {
              self.$store.commit("_dwChecked", {
                txt:`点击选择${_data.dwFeedTitle}机构或厂商`,
                val:[]
              });
            }
            break;
          case 3:
            if (da.txt) {
              self.$store.commit("_jqChecked", da);
            } else {
              self.$store.commit("_jqChecked", {
                txt: "点击选择下发单位",
                val: []
              });
            }
            break;
        }
        _methods.goBack();
      });
    },
    beforeDestroy() {
      _data.busInit.off_();
      _methods.headerTitleChange(this.headerFlag, true);
      _methods.headerRightShow(this.headerRightType);
    }
  }

</script>
